<template>
    <page>
        <infinite :onInfinite="onInfinite" class="absfit">
            <div class="c1520583809589 white-bg">
                <header flex="main:center cross:center dir:top" class="rel">
                    <p class="white f42">{{money / 100 || 0}}</p>
                    <span class="white arc px14 line26 f14 mt16" style="background-color: #F7BAA3">总共充值(元)</span>
                    <div class="tr fitw white f14 question">
                        <router-link :to="{name: 'recharge_give_rule'}">
                            <i class="iconfont icon-question mr4"></i>赠送规则
                        </router-link>
                    </div>
                    <ul flex="box:mean" class="abs pos-b fitw px12 boxShadow">
                        <li flex="main:center cross:center" class="white-bg corner mr8 h50">赠送金额: {{gift / 100}}</li>
                        <li flex="main:center cross:center" class="white-bg corner h50">
                            本月金额: {{ monthTotal / 100}}
                        </li>
                    </ul>
                </header>
                <table cellspacing="0" class="f14">
                    <thead class="color6">
                    <tr>
                        <td>时间</td>
                        <td>金额(元)</td>
                        <td>交易状态</td>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="(i, index) in list">
                        <td class="bdb">{{i.createDate | dateFormat}}</td>
                        <td class="red bdb">{{i.payMoney / 100}}<span class="c7" v-if="i.giftMoney">+{{i.giftMoney / 100}}</span></td>
                        <td class="bdb nowrap">
                            <span v-if="i.refunded" class="c9">已退款</span>
                            <span class="c3" v-else-if="i.isRecode">充值成功</span>
                            <span class="c1" v-else>充值失败</span>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <m-loading :show="!ajax_delay_once" class="absfit myloading white-bg" slot="cover"></m-loading>
        </infinite>
    </page>
</template>
<script>
  import Vue from 'vue'

  export default {
    data () {
      return {
        ajax_delay_once: false,
        list: [],
        money: 0,
        monthTotal: 0,
        gift: 0
      }
    },
    async created () {
      let body = await this.$get('payRecord/getMonthPayRecord')
      let {monthTotal, total, gift} = body.obj
      this.money = total
      this.gift = gift
      this.monthTotal = monthTotal
    },
    computed: {},
    methods: {
      async onInfinite (page) {
        let {obj: {dataList, total}} = await this.$get('payRecord/getRecordByUserId', {
          page
        })
        this.list.push(...dataList)
        return this.list.length < total
      }
    },
    components: {}
  }
</script>
<style type="text/scss" lang="scss">
    .c1520583809589 {
        .vux-timeline-item-content {
            position: relative;
            top: -50%;
        }
        .vux-timeline-item-color, .vux-timeline-item-tail {
            background-color: #E91E63;
        }
    }
</style>
<style type="text/scss" lang="scss" scoped>
    header {
        height: 190px;
        background-color: #ff6a63;
        //background-image: linear-gradient(left, #F66F5D, #EBAD71);
        margin-bottom: 30px;
        z-index: 1;
        .boxShadow {
            bottom: -30px;
            li {
                box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
            }
        }
    }

    .myloading {
        top: 220px;
    }

    table {
        margin-top: 50px;
        width: 100%;
        text-align: center;
        table-layout: fixed;
        thead {
            background-color: #EEEEEE;
            line-height: 40px;
        }
        tbody {
            line-height: 50px;
        }
        td:nth-child(1) {
            width: 150px;
            padding-left: 10px;
        }
        td:nth-child(3) {
            width: 100px;
            padding-right: 10px;
        }
    }
    .question {
        margin-top: -26px;
        line-height: 26px;
        padding-right: 20px;
    }
</style>
